
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/include/page_header.jspf" %>
<%@ taglib uri="http://displaytag.sf.net" prefix="display" %>
<jsp:useBean id="date" scope="page" class="java.util.Date"></jsp:useBean>
    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>JSP Page</title>   
            <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.timers.js"></script>        
            <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.autoScroller.js"></script>
            <script type="text/javascript">
                $(document).ready( function() {                    
                    autoScroller('vmarquee2',2);                                    
                });
            </script>

            <style>
                #doc ::-webkit-scrollbar{width:9px;height:9px;}
                #doc ::-webkit-scrollbar-button:start:decrement,#doc ::-webkit-scrollbar-button:end:increment{display:block;height:0;background-color:transparent;}
                #doc ::-webkit-scrollbar-track-piece{background-color:#FAFAFA;-webkit-border-radius:0;-webkit-border-bottom-right-radius:8px;-webkit-border-bottom-left-radius:8px;}
                #doc ::-webkit-scrollbar-thumb:vertical{height:50px;background-color:#999;-webkit-border-radius:8px;}
                #doc ::-webkit-scrollbar-thumb:horizontal{width:50px;background-color:#999;-webkit-border-radius:8px;}
                #doc p {
                    padding-bottom: 10px;
                    border-bottom: solid 1px #2A1F55;
                    border-bottom-style:dotted;
                }
                #doc{
                    font-family: Geneva, Arial, Helvetica, sans-serif;
                }


                /*
                
                        This is the only semi-important stuff for plugin installation
                        It's just an example, so customize away!
                */

                #vertical-ticker{
                    height:100px;
                    overflow:hidden;
                    margin:0; padding:0;
                    -webkit-box-shadow:0 1px 3px rgba(0,0,0, .4);
                }

                #vertical-ticker li{
                    padding:20px 20px;
                    display:block;
                    background:#efefef;
                    color:#333;
                    border-bottom:1px solid #ddd;
                    text-align:center;
                    font-size:12px;
                    font-weight:bold;
                    font-family: Helvetica Neue, times, serif;
                }

            </style>

        </head>

        <body >       
        <s:errors/>                
        <div id="form">
            <div id="logo">
                <span>
                    <img src="${pageContext.request.contextPath}/images/img/ribbon.png"/>               
                </span>
            </div>
            <h3>
                SELAMAT DATANG KE <i>mytaha</i>
            </h3>
            <p class="float_left_image">
                <img src="${pageContext.request.contextPath}/images/img/intro_img.png"/>
            </p>
            <p class="float-left-margin" style="font-size: 12px">

                Dalam usaha untuk mempelbagaikan perkhidmatan yang disediakan oleh <b><i>TH</i></b>,
                perkhidmatan yang berteraskan interaktif online telah diterajui untuk memudahkan rakyat
                dan ke arah meningkatkan daya saing negara. Antara kemudahan tersebut adalah portal 
                mytaha. Pendeposit boleh mengakses perkhidmatan ini tanpa had sempadan, pada
                bila-bila masa dan di mana-mana sahaja.
            </p>            
        </div>
        <div id="content" class="float-left">
            <div id="logo">
                <span>
                    <img src="${pageContext.request.contextPath}/images/img/ribbon.png"/>               
                </span>
            </div>
            <h4>
                PENGUMUMAN TERKINI
            </h4>                            
            <div class="autoScroller-container" style="width:600px; height:100px; overflow: auto; font-size: 12px">
                <div id="vmarquee2">
                    <c:forEach items="${actionBean.senaraiIklan}" var="items">
                        <p class="float-left-margin">
                            ${items.keterangan}
                        </p>
                    </c:forEach>

                </div>
            </div>
        </div>                               
        <div id="content" class="float-left">
            <div id="logo">
                <span>
                    <img src="${pageContext.request.contextPath}/images/img/ribbon.png"/>               
                </span>
            </div>                     
            <h4>
                JENIS PERKHIDMATAN :<br/>                
            </h4>
        </div>
        <div id="content" class="float-left">
            <div>
                <img src="${pageContext.request.contextPath}/images/img/kelab_taha_logo.png"/>
            </div>
            <div style="font-size: 12px">
                <!--<i>( Boleh terus akses ke mytaha tanpa perlu<br/> mendapatkan no. pin di kaunter <b><i>TH</i></b> )</i> -->
                <!--<i>( Perkhidmatan melalui myTaha boleh diakses <br/>TANPA PIN ATAU KATA LALUAN )</i> -->
                <i>( Perkhidmatan melalui myTaha boleh diakses <br/>TANPA PIN ATAU KATA LALUAN <br/>adalah seperti berikut )</i>
                <ul>    
                    <li>
                        Semakan Pendaftaran Haji</li>
<!--                    <li>Semakan Tawaran Tunai Haji</li> -->
                    <li>Pendaftaran Kelab TaHa/TaHa@U</li>
                    <li>Pertanyaan Kelab TaHa/TaHa@U</li>                    
                </ul>
            </div>
        </div>    
        <div class="float-right-margin">
            <div>
                <img src="${pageContext.request.contextPath}/images/img/passbook.png"  height="138px" width="256px"/>
            </div>
            <div style="font-size: 12px">
                <!--<i>( Boleh terus akses ke mytaha dan perlu<br/> mendapatkan no. pin di kaunter <b><i>TH</i></b> )</i>-->
                <i>( Perkhidmatan melalui MyTaHa <br/>PERLU MENDAPATKAN PIN di mana-mana <br/>kaunter TH yang berdekatan <br/>adalah seperti berikut )</i>
                <p>
                <div>                
                    <li><b>HAJI</b></li>
                    - Pendaftaran Haji <br/>
                    - Cetak Pendaftaran Haji<br/>
<!--                    - Jawab/Tolak/Cetak Surat Tawaran<br/> -->
                    - Semak/Cetak Jadual Penerbangan 
                </div><br/>
                </p>
                <p>
                <div style="float: left;">                   
                    <li><b>DEPOSIT</b></li>                                                 
                    - Kemaskini Profil<br/>
                    - Pindahan Simpanan<br/>                      
                </div>
                <div style="float: right"><br>              

                    - Pertanyaan Baki Akaun<br/>
                    - Penyata Akaun                                                                
                </div>                
                </p>               
            </div>
        </div> 
    </body>
</html>

